<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务一：零基础HTML及CSS编码</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>

<div class="header">
    <span class="logo-name">百度前端技术学院</span>

    <ul class="menu text-right">
        <li><a href="http://ife.baidu.com/">导航链接一</a></li>
        <li><a href="http://ife.baidu.com/course/all">导航链接二</a></li>
        <li><a href="http://ife.baidu.com/note/list?isElite=1">导航链接三</a></li>
        <li><a href="http://giscafer.com">导航链接四</a></li>
    </ul>
</div>
<section>
    <div>
        <h2>文章一级标题</h2>
        <h3>文章二级标题</h3>
        <span>文章作者</span>&nbsp;<span>文章发表时间</span>

        <div>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了</br>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://giscafer.com">这里的链接是到博客</a>，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
        </div>
        <img src="../../github.jpg" alt="" width="20%"/>
        <div>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了</br>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://giscafer.com" target="_blank">这里的链接是打开新窗口到博客</a>，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
        </div>
    </div>
</section>
<section>

    <div>
        <h2>另一篇文章一级标题</h2>
        <h3>文章二级标题</h3>
        <span class="text">文章作者</span>&nbsp;<span class="text">文章发表时间</span>
        <div>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了</br>
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://giscafer.com">这里的链接是到博客</a>，这是一个很长很长的段落，
            这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
        </div>
        <img src="../../github.jpg" alt="" width="20%"/>
        <div>
            <ul class="list-none-style">
                <li>项目列表一</li>
                <li>项目列表二</li>
                <li>项目列表三</li>
            </ul>
            <div>
                <h3>图片</h3>
                <div class="pic-list">
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../../github.jpg" alt="" width="250px"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../../github.jpg" alt="" width="250px"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../../github.jpg" alt="" width="250px"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../../github.jpg" alt="" width="250px"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../../github.jpg" alt="" width="250px"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../../github.jpg" alt="" width="250px"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../../github.jpg" alt="" width="250px"/>
                    </div>
                    <div class="pic-item">
                        <p>好看的图片</p>
                        <img src="../../github.jpg" alt="" width="250px"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section>
    <div>
        <h2>最后一篇文章一级标题</h2>
        <h3>最后一篇文章二级标题</h3>
        <span class="text">文章作者</span>&nbsp;<span class="text">文章发表时间</span>
        <div>
            <ul style="list-style:decimal" class="text-strong">
                <li>排名1</li>
                <li>排名2</li>
                <li>排名3</li>
            </ul>
            <p>下边是一个表格，border="1"</p>
            <table>
                <thead>
                <tr>
                    <th>表头</th>
                    <th>表头</th>
                    <th>表头</th>
                    <th>表头</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td><a href="http://giscafer.com">操作</a></td>
                </tr>
                <tr>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td><a href="http://giscafer.com">操作</a></td>
                </tr>
                <tr>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td><a href="http://giscafer.com">操作</a></td>
                </tr>
                <tr>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td>单元格</td>
                    <td><a href="http://giscafer.com">操作</a></td>
                </tr>
                <tr class="total">
                    <td colspan="2">总计</td>
                    <td colspan="2">10000</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>
<section>
    <div class="side">
        <p class="sidebar-title">这里以后是一个侧栏，这是侧栏的标题</p>
        <form action="/" class="form-content">
            <div class="row">
                <div class="form-control col-4 pull-right">
                    <label>请输入邮箱地址：</label>
                </div>
                <div class="form-control col-6 pull-left">
                    <input type="text" placeholder="这是一个文本输入框"/>
                    <br>
                    <span class="form-info">邮箱地址请按要求输入</span>
                </div>
            </div>
            <div class="row">
                <div class="form-control col-4 pull-right">
                    <label>请输入密码：</label>
                </div>
                <div class="form-control col-6 pull-left">
                    <input type="password" placeholder="这是一个文本输入框"/>
                </div>
            </div>
            <div class="row">
                <div class="form-control col-4 pull-right">
                    <label>请重复输入密码：</label>

                </div>
                <div class="form-control col-6 pull-left">
                    <input type="password" placeholder="这是一个文本输入框"/> <br>
                    <span class="form-info">密码请为6~16位英文数字</span>
                </div>
            </div>

            <div class="row">
                <div class="form-control col-4 pull-right">
                    <label>性别：</label>

                </div>
                <div class="form-control col-6 pull-left">
                    <input name="sex" type="radio" value="" checked/>男
                    <input name="sex" type="radio" value=""/>女
                </div>
            </div>

            <div class="row">
                <div class="form-control col-4 pull-right">
                    <label>城市：</label>

                </div>
                <div class="form-control col-6 pull-left">
                    <select name="city" id="">
                        <option value="beijing">北京</option>
                        <option value="guangzhou">广州</option>
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="form-control col-4 pull-right">
                    <label>爱好：</label>

                </div>
                <div class="form-control col-6 pull-left">
                    <input type="checkbox" value="sport"/> 运动
                    <input type="checkbox" value="art"/> 艺术
                    <input type="checkbox" value="science"/> 科学
                </div>
            </div>
            <div class="row">
                <div class="form-control col-4 pull-right">
                    <label>个人描述：</label>

                </div>
                <div class="form-control col-6 pull-left">
                    <textarea style="width: 100%;height:60px;">这是一个多行输入框，请输入您的描述</textarea>
                </div>
            </div>
            <div class="row">
                <input type="button" value="确认提交" class="btn col-12"/>
            </div>

        </form>
    </div>
</section>
<footer>
    <p>版权所有&copy;<a href="https://github.com/giscafer">giscafer</a></p><br>
    <p><strong>欢迎关注个人微信公众号：giscafer</strong></p><br>
    <img src="../../qrcode_for_giscafer.jpg" alt="微信公众号" width="150px"/>
</footer>
</body>
</html>